<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <link rel="stylesheet" href="css/base.css">
    <link rel="stylesheet" href="css/daohang.css">
    <link rel="stylesheet" href="css/company.css">
    <script src="./jquery-3.6.0.js"></script>

</head>

<body>
    <!-- 导航栏 -->
    <nav>
        <ul>
            <!-- 左边浮动 -->
            <div class="left">
                <li class="logo">
                    <a href=""> <span>BOSS直聘</span></a>
                </li>
            </div>

            <div class="center">
                <li id="shouye"><a href="./shouye.html"><span>首页</span></a></li>
                <li id="job"><a href="./job.html"><span>职位</span></a></li>
                <li id="campus"><a href="./campus.html"><span>校园</span></a></li>
                <li id="turtle"><a href="./turtle.html"><span>海归</span></a></li>
                <li id="company"><a href="./company.html"><span id="current">公司</span></a></li>

                <li id="app"><a href="./APP.html"><span>APP</span></a></li>
                <li id="news"><a href="./zixun.html"><span>资讯</span></a></li>
                <li id="find"><a href=""><span>发现</span></a></li>
        >
                <li id="all-in"><a href="./youle.html"><span>有了</span></a></li>
                <li id="baike"><a href="./baike.html"><span>百科</span></a></li>

            </div>
            <div class="right">
                <!-- 右边浮动 -->
                <li><a href=""><span>上传简历</span></a></li>
                <li><a href=""><span>我要找工作</span></a></li>
                <li><a href=""><span>我要招聘</span></a></li>
                <li><a href=""><input type="button" value="注册"></a></li>
                <li><a href=""><input type="submit" value="登录"></a></li>
            </div>
        </ul>
    </nav>

        <!-- 导航栏下面的东西 -->
    <div class="city-all">
        <div class="city">
            <p class="hot-city">
                <span>公司地点：</span>
                <span style="color: #00c2b3;">全国</span>
                <span>北京</span>
                <span>上海</span>
                <span>广州</span>
                <span>深圳</span>
                <span>杭州</span>
                <span>天津</span>
                <span>西安</span>
                <span>苏州</span>
                <span>武汉</span>
                <span>厦门</span>
                <span>长沙</span>
                <span>成都</span>
                <span>郑州</span>
                <span>重庆</span>
                <span>全部城市</span>
            </p>
            <div class="other-city">
                <div>
                    <span>行业类型：</span>
                </div>
                <div>
                    <span style="color: #00c2b3;">不限</span>
                    <span>电子商务</span>
                    <span>游戏</span>
                    <span>媒体</span>
                    <span>广告营销</span>
                    <span>数据服务</span>
                    <span>医疗健康</span>
                    <span>生活服务</span>
                    <span>O2O</span>
                    <span>旅游</span>
                    <span>分类信息</span>
                    <span>音乐/视频/阅读</span>
                    <span>在线教育</span>
                    <span>社交网络</span>
                    <span>人力资源服务</span>
                    <span>企业服务</span>
                    <span>信息安全</span>
                    <span>电子商务</span>
                    <span>游戏</span>
                    <span>媒体</span>
                    <span>广告营销</span>
                    <span>数据服务</span>
                    <span>医疗健康</span>
                    <span>生活服务</span>
                    <span>O2O</span>
                    <span>旅游</span>
                    <span>分类信息</span>
                    <span>音乐/视频/阅读</span>
                    <span>在线教育</span>
                    <span>社交网络</span>
                    <span>人力资源服务</span>
                    <span>企业服务</span>
                    <span>信息安全</span>
                </div>
            </div>
            <p class="hot-city">
                <span>融资阶段：</span>
                <span style="color: #00c2b3;">不限</span>
                <span>未融资</span>
                <span>天使轮</span>
                <span>A轮</span>
                <span>B轮</span>
                <span>C轮</span>
                <span>D轮及以上</span>
                <span>已上市</span>
                <span>不需要融资</span>
            </p>
            <p class="hot-city">
                <span>公司规模：</span>
                <span style="color: #00c2b3;">不限</span>
                <span>0-20人</span>
                <span>20-99人</span>
                <span>100-499人</span>
                <span>500-999人</span>
                <span>1000-9999人</span>
                <span>10000人以上</span>
            </p>
        </div>
    </div>

  
    <!-- 根据简历匹配 -->
    <div class="expect">
        <div>
            <a href="">

                <input type="text" name="" id="">
                <span>根据简历精准匹配</span>
            </a>
            <div>
                <span>共
                    <em>28+</em>
                    公司</span>
            </div>
        </div>
    </div>

    <!-- 公司及其职位展示 -->
    <div class="company-tab-box  company-list">
        <ul>
            <li class="sub-li">
                <!-- li 上部分 -->
                <div class="sub-li-top">
                    <div class="left">
                        <img src="https://img.bosszhipin.com/beijin/mcs/chatphoto/20160414/241b4325e67277a53e7029583ac005e509d48640e9ae8daebc36fe88143612c9.jpg?x-oss-process=image/resize,w_120,limit_0"  alt="">
                    </div>
                    <div class="right">
                        <h4>永航科技</h4>
                        <p>
                            <span>不需要融资</span>
                            <span class="vline"></span>
                            <span>游戏</span>
                        </p>
                    </div>
                </div>
                <!-- li  下部分 -->
                <div class="sub-li-bottom">
                    <p>
                        热招
                        <u class="h">资深TA (MJ001062)</u>                        
                        <span>50-80K·14薪</span>
                    </p>
                </div>
            </li>
           
        </ul>
        <!-- 展示切换的页数 -->
        <div class="page">
            <a href="" class="prev"></a>
            <a href="" class="cur">1</a>
            <a href="">2</a>
            <a href="">3</a>
            <span>...</span>
            <a href="" class="next"></a>
        </div>
    </div>


    <!-- --------------下面的底部导航部分------------------ -->

    <div class="footer">
        <div class="footer-inner">
            <div class="inner-top">
                <ul class="one">
                    <li id="first">企业服务</li>
                    <li>职位搜索</li>
                    <li>新闻资讯</li>
                    <li>BOSS直聘APP</li>
                    <li>投资者关系</li>
                </ul>
                <ul class="one">
                    <li id="first">使用与帮助</li>
                    <li>协议与规则</li>
                    <li>个人信息保护政策</li>
                    <li>防骗指南</li>
                    <li>使用帮助</li>
                </ul>
                <ul class="one">
                    <li id="first">练习BOSS直聘</li>
                    <li>北京华品博睿网络技术有限公司</li>
                    <li>公司地址 北京市朝阳区太阳宫中路16号院1号楼18层1801内09</li>
                    <li>违法和不良信息举报邮箱/未成年人举报渠道 jubao@kanzhun.com</li>
                    
                </ul>
                <ul class="one">
                    <li id="first">
                        <img src="https://static.zhipin.com/v2/web/geek/images/footer-logo.png" alt="">
                    </li>
                    <li>企业服务热线和举报投诉/未成年人举报渠道 </li>
                    <li>公司地址 老年人直连热线</li>
                    <li>工作日  8:00 - 22:00</li>
                    <li>休息日  9:30 - 18:30</li>
                </ul>
            </div>
            <div class="inner-bottom">
                <div class="left">
                    <div class="inner-bottom-left">
                        <span>Copyright © 2022 BOSS直聘</span>
                        <span>京ICP备14013441号-5</span>
                        <span>京ICP证150923号</span>
                        <span>京网文[2020]0399-066 号</span>
                        <span> <img src="	https://static.zhipin.com/v2/web/geek/images/icon-badge-1.png" alt=""> 电子营业执照</span>
                        <span><img src="	https://static.zhipin.com/v2/web/geek/images/icon-beian.png" alt=""> 京公网安备11010502032801</span>
                    </div>
                    <div class="inner-bottom-right">
                        <span>朝阳警力</span>
                        <span>人力资源服务许可证</span>
                        <span>网上有害信息举报专区</span>
                        <span>朝阳区人社局监督电话</span>
                    </div>
                </div>
                <div class="right">
                    <a href="https://www.weibo.com/bosszhipin" target="_blank" class="weibo">
                        <img src="./img/turtle/微博.svg" alt="">
                    </a>
                    <a href="#" class="weixin">
                        <img src="./img/turtle/微信.svg" alt="">
                    </a>
                    <a href="#" class="app">
                        <img src="./img/turtle/app.svg" alt="">
                    </a>
                    <a href="" class="icon-client-app">
                        <img src="https://img.bosszhipin.com/static/file/2021/dppx09luaq1637052502211.png" alt="">
                    </a>
                </div>
            </div>
        </div>
        <p>
            <span>友情链接</span>
            <span>看准网</span>
        </p>
    </div>
  <!-- 弹出部分 的样式 -->
  <div class="tanchutop">
    <div class="top-search">
        <div class="logo">
            <img src="https://static.zhipin.com/zhipin-geek/v490/web/geek/images/logo-2x.png" alt="">
        </div>
        <div class="top-center">
            <span>职位类型:</span>
            <input type="text" placeholder="搜索职位、公司">
            <button>搜索</button>
        </div>

        <div class="top-right">
            <input type="text" name="" id="" placeholder="输入手机号">
            <input type="text" placeholder="验证码        获取">
            <button>登录注册</button>
        </div>
    </div>

</div>
    
    <script>

                
        // 监听屏幕滚动到一定位置的时候，出现顶部 固定样式
        window.addEventListener('scroll', function () {
            // console.log(document.documentElement.scrollTop);
            var num = document.documentElement.scrollTop / 100
            var num1 = Math.ceil(num)
            if (num1 >= 2) {
                $('.tanchutop').show().css({
                    position: 'fixed',
                    top: '0'
                })
            } else if (num1 < 2) {
                $('.tanchutop').hide()
            }
        })

         $(window).ready(function () {
            let str = ''
            $.ajax({
                type: 'get',
                url: '/getCompanyList',
                dataType: 'json'
            }).done((data) => {
               let  dataJob =data.job.jobList
                let str = ''
                dataJob.forEach((value, index) => {
                    str+=`
                    
                    <li class="sub-li">
                            <div class="sub-li-top">
                                <div class="left">
                                    <img src="${value.src}"  alt="">
                                </div>
                                <div class="right">
                                    <h4>${value.companyName}</h4>
                                    <p>
                                        <span>${value.level}</span>
                                        <span class="vline"></span>
                                        <span>${value.trade}</span>
                                    </p>
                                </div>
                            </div>
                            <div class="sub-li-bottom">
                                <p>
                                    热招
                                    <u class="h">${value.h}</u>                        
                                    <span>${value.money}</span>
                                </p>
                            </div>
                    </li>
           
                    
                    `
                })
           
                $('.company-list>ul').html(str)
            }).fail((err) => {
                console.log(err);
            })
        })
    </script>
</body>

</html>